<template>
	<view class="center">
		<view class="center_top" :style="{ backgroundImage: 'url: (' + userInfo.head_img_url + ' no-repeat 0% 50%)' }">
			<view class="mask"></view>
		</view>
		<view class="center_box_bg">
			<view class="profily">
				<view class="base">
					<view class="profily_header" :style="{ backgroundImage: 'url: (' + userInfo.head_img_url + ')' }">
						<image :src="userInfo.head_img_url"></image>
					</view>
					<text>{{userInfo.nick_name}}</text>
					<image src="../../static/fumou-center-template/setting.png" mode=""></image>
				</view>
				<view class="order_status">
					<view class="status" v-for="item in status">
						<image class="icon" :src="item.url" mode="aspectFill"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="baiban">

			</view>
			<view class="center_menu">
				<view class="menu_item" v-for="item in menus">
					<image :src="item.icon" mode="aspectFill"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tools from '@/static/utils/tools.js'
	var userInfo = '';
	export default {
		data() {
			return {
				root_url:this.root_url,
				userInfo:'',
				status: [{
						key: 1,
						name: '待发货',
						url: '../../static/fumou-center-template/one.png'
					},
					{
						key: 2,
						name: '待收货',
						url: '../../static/fumou-center-template/2.png'
					},
					{
						key: 3,
						name: '待评价',
						url: '../../static/fumou-center-template/3.png'
					},
					{
						key: 4,
						name: '全部订单',
						url: '../../static/fumou-center-template/4.png'
					}
				],
				menus: [{
						name: '我的收藏',
						icon: '../../static/fumou-center-template/5.png',
						key: 1,
					},
					{
						name: '地址管理',
						icon: '../../static/fumou-center-template/6.png',
						key: 2,
					},
					{
						name: '尺码对照表',
						icon: '../../static/fumou-center-template/7.png',
						key: 3,
					},
					{
						name: '帮助中心',
						icon: '../../static/fumou-center-template/8.png',
						key: 4,
					},
					{
						name: '意见反馈',
						icon: '../../static/fumou-center-template/9.png',
						key: 5,
					},
					{
						name: '关于我们',
						icon: '../../static/fumou-center-template/10.png',
						key: 6,
					}

				]
			};
		},
		
		onLoad() {
			var that = this;
			userInfo = uni.getStorageSync('userInfo');
			var user_id = 4829;//userInfo.id
			tools.httpClient('get','index.php?c=shop&a=getUserInfo',{user_id:user_id},(res)=>{
				that.userInfo = res.data
				console.log(res,11)
			})
		},
		methods: {

		},
		computed: {

		}
	}
</script>

<style>
page {
  height: 100%;
}

.profily,
.profily_header {
  border-radius: 8px;
}

.center {
  height: 100%;
}
.center_top {
  height: 18%;
  background: url("../../static/fumou-center-template/header.jpg") no-repeat 0% 50%;
  background-size: cover;
}
.center_top .mask {
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
}
.center_box_bg {
  background: #F9F9F9;
  position: relative;
}
.center_box_bg .profily {
  position: absolute;
  width: 90%;
  margin: 0 auto;
  top: -100upx;
  left: 5%;
  background: #FEFEFE;
  padding: 35upx;
  box-sizing: border-box;
  box-shadow: 0px 2px 5px #EDEDED;
}

.base {
  display: flex;
  align-items: center;
  border-bottom: 2px solid #F6F6F6;
  padding-bottom: 35upx;
  position: relative;
}
.base .profily_header {
  height: 120upx;
  width: 120upx;
  background-size: 100%;
}
.base text {
  margin-left: 20px;
  font-size: 30upx;
}
.base image {
  position: absolute;
  height: 40upx;
  width: 40upx;
  right: 0px;
  top: 0px;
}

.order_status {
  display: flex;
  justify-content: space-between;
  margin-top: 35upx;
}
.order_status .status {
  width: 140upx;
  font-size: 24upx;
  text-align: center;
  letter-spacing: 0.5px;
  display: flex;
  flex-direction: column;
}
.order_status .status .icon {
  width: 50upx;
  height: 50upx;
  margin: 0 auto;
  margin-bottom: 5px;
}

.baiban {
  background: #FEFEFE;
  height: 300upx;
}

.center_menu {
  width: 100%;
  display: inline-block;
}
.center_menu .menu_item {
  font-size: 28upx;
  letter-spacing: 1px;
  padding: 14px 5%;
  background: #FEFEFE;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
  border-bottom: 1px solid #EFEFEF;
}
.center_menu .menu_item:hover {
  background: #F6F6F6 !important;
}
.center_menu .menu_item::after {
  content: "";
  width: 30upx;
  height: 30upx;
  position: absolute;
  right: 5%;
  background: url("../../static/fumou-center-template/right.png") no-repeat;
  background-size: 100%;
}
.center_menu .menu_item text:nth-of-type(1) {
  margin-left: 10px;
}
.center_menu .menu_item image {
  width: 40upx;
  height: 40upx;
}
.center_menu .menu_item:nth-of-type(4) {
  margin-top: 10px;
}
</style>
